<template>
  <view
    class="test"
    :class="{
      w100: isShowAnswer,
    }"
  >
    <view
      class="test_top"
      v-for="(item, index) in list"
      :key="index"
      v-show="currentIndex === index"
    >
      <view class="title">
        <view class="title_content">
          <view class="title_number">{{ index + 1 }}</view>
          <text>{{ item.question }}</text>
        </view>
      </view>
      <view class="box">
        <view class="options" v-if="item.optionsList.length > 0">
          <view
            class="options_container"
            v-for="(option, i) in item.optionsList"
            :key="i"
            @click="choiceAnswer(item, option)"
            :class="{
              active: item.choiceAnswer === option.name && !isShowAnswer,
              correct: item.answer === option.name && isShowAnswer,
              error: item.choiceAnswer === option.name && isShowAnswer,
            }"
          >
            <view class="options_content">
              {{ option.name }}.{{ option.value }}
            </view>
            <view class="options_iamge">
              <image
                v-if="item.answer === option.name && isShowAnswer"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                mode="widthFix"
              ></image>
              <image
                v-else-if="item.choiceAnswer === option.name && isShowAnswer"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="answer" v-if="isShowAnswer">
          正确答案：{{ item.answer }}<br />
          解析：{{ item.analysis }}
        </view>
      </view>
    </view>
    <view class="test_bottom">
      <view class="button">
        <template v-if="!isShowAnswer">
          <view class="button_content" @click="submit()">
            <text>提交</text>
          </view>
        </template>
        <template v-else>
          <view
            class="button_content"
            @click="nextQuestion()"
            :class="{ disabled: currentIndex === list.length - 1 }"
          >
            <text>下一题</text>
          </view>
          <view
            class="button_content"
            @click="removeQuestion()"
            v-show="isCorrect && !isRemove"
          >
            <text>移除错题</text>
          </view>
        </template>
      </view>
      <view class="noop" v-if="isShowAnswer"> </view>
    </view>
    <Tips :show="showTips1" :content="tipsContent1"></Tips>
    <Tips :show="showTips2" :content="tipsContent2"></Tips>
  </view>
</template>
<script>
export default {
  name: "ErrorQuestion",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    questionInfo() {
      return this.list[this.currentIndex];
    },
  },
  data() {
    return {
      currentIndex: 0,
      isShowAnswer: false,
      isCorrect: true,
      isRemove: false,
      showTips1: false,
      showTips2: false,
      tipsContent1: "请选择答案！",
      tipsContent2: "已是最后一题！",
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.initOptions();
    },
    initData() {
      this.isShowAnswer = false;
      this.isCorrect = true;
      this.isRemove = false;
    },
    initOptions() {
      this.list.forEach((item) => {
        let optionsList = [];
        if (item.optiona) {
          optionsList.push({
            name: "A",
            value: item.optiona,
          });
        }
        if (item.optionb) {
          optionsList.push({
            name: "B",
            value: item.optionb,
          });
        }
        if (item.optionc) {
          optionsList.push({
            name: "C",
            value: item.optionc,
          });
        }
        if (item.optiond) {
          optionsList.push({
            name: "D",
            value: item.optiond,
          });
        }
        this.$set(item, "optionsList", optionsList);
        this.$set(item, "choiceAnswer", "");
      });
    },
    choiceAnswer(item, option) {
      this.$set(item, "choiceAnswer", option.name);
    },
    submit() {
      const choiceAnswerText = this.list[this.currentIndex].choiceAnswer;
      if (choiceAnswerText === "") {
        this.showTips1 = true;
        setTimeout(() => {
          this.showTips1 = false;
        }, 2000);
        return;
      }
      if (choiceAnswerText !== "") {
        if (choiceAnswerText === this.questionInfo.answer) {
          this.isCorrect = true;
        } else {
          this.isCorrect = false;
        }
      }
      this.isShowAnswer = true;
    },
    nextQuestion() {
      if (this.currentIndex === this.list.length - 1) {
        this.showTips2 = true;
        setTimeout(() => {
          this.showTips2 = false;
        }, 2000);
        return;
      }
      this.currentIndex++;
      this.initData();
    },
    removeQuestion() {
      this.isRemove = true;
      this.$emit("remove", this.questionInfo.id);
    },
  },
};
</script>
<style scoped lang="scss">
@import "./ErrorQuestion";
</style>
